<template>
  <uv-list :customStyle="{ backgroundColor: 'transparent', padding: '20rpx' }">
    <uv-list-item
      v-for="v in lists"
      :key="v.id"
      :customStyle="{ marginBottom: '20rpx', borderRadius: '10rpx' }"
	  clickable
    >
      <view class="orderList-item" @click="($event)=>handleClick($event,v.id)">
        <view class="orderList-item_status"
          >{{ v.status_txt }}:{{ v.time }}</view
        >
        <view class="orderList-item_detail">
          <view class="orderList-item_detail_top flex flex-between">
            <uv-avatar :src="v.icon" size="60rpx"></uv-avatar>
            <view class="orderList-item_detail_top_mid">
              <view class="orderList-item_detail_top_mid_store">{{
                v.address
              }}</view>
              <view class="orderList-item_detail_top_mid_contact">{{
                v.contact
              }}</view>
            </view>
            <uv-icon
              name="phone-fill"
              :color="baseColor"
              size="30px"
			  id = "stop"
              @click="tel(v.contact)"
            ></uv-icon>
          </view>
          <view class="orderList-item_detail_desc flex">
            <view class="orderList-item_detail_desc_label">件数：</view>
            <view class="orderList-item_detail_desc_num">{{ v.num }}</view>
            <view class="orderList-item_detail_desc_label">重量：</view>
            <view class="orderList-item_detail_desc_num">{{ v.weight }}</view>
            <view class="orderList-item_detail_desc_label">货物名称：</view>
            <view class="orderList-item_detail_desc_num">{{ v.title }}</view>
          </view>
          <view class="orderList-item_detail_desc flex">
            <view class="orderList-item_detail_desc_label">来源：</view>
            <view class="orderList-item_detail_desc_num">{{ v.from }}</view>
            <view class="orderList-item_detail_desc_label">下单人：</view>
            <view class="orderList-item_detail_desc_num">{{ v.real_name }}</view>
            <view class="orderList-item_detail_desc_label"
              ><uv-icon name="phone"></uv-icon
            ></view>
            <view class="orderList-item_detail_desc_num">{{ v.mobile }}</view>
          </view>
        </view>
        <view class="orderList-item_bottom flex flex-end">
			<view class="orderList-item_bottom_button" v-if="v.status == 0">
				<uv-button text="立即抢单" id = "stop" @click="rab(v.id)" type="warning"></uv-button>
			</view>
			<view class="orderList-item_bottom_button" v-if="v.status == 0">
				<uv-button text="取消接单" id = "stop" @click="rab(v.id)" type="success"></uv-button>
			</view>
			<view class="orderList-item_bottom_button" v-if="v.status == 0">
				<uv-button text="转单" id = "stop" @click="rab(v.id)" type="warning"></uv-button>
			</view>
			<view class="orderList-item_bottom_button" v-if="v.status == 0">
				<uv-button text="揽件"id = "stop" @click="rab(v.id)" type="primary"></uv-button>
			</view>
        </view>
      </view>
    </uv-list-item>
  </uv-list>
</template>

<script lang="ts" setup>
import { ref, watch } from "vue";
import { userStore } from "@/store/userStore";
import { confirm, tip, goto } from "@/utils";
const user = userStore();
const props = defineProps<{
  lists: any[];
}>();
const localLists = ref<any[]>([...props.lists]);
watch(
  () => props.lists,
  (newval: any[]) => {
    localLists.value = [...newval];
  }
);
const tel = (phone: string) => {
  uni.makePhoneCall({
    phoneNumber: phone,
  });
};
const rab = (id: number) => {
  if (!user.at_work) {
    confirm("你处于休息状态，不能抢单。是否开始工作？", () => {
      user.at_work = true;
      doRab(id);
    });
  } else {
    doRab(id);
  }
};
const doRab = (id: number) => {
  tip("抢单成功" + id);
};
const handleClick = (event:any,id:number)=>{
	if(event.target.id!="stop"){
		goto('pages/order/detail','to',{id:id})
	}
}
</script>

<style lang="scss">
.orderList-item{
	padding: 10rpx;
	&_status{
		background-color: rgba(210, 240, 230, 1.0);
		padding: 10rpx 6rpx;
		font-size: 28rpx;
	}
	&_detail{
		margin-top: 4rpx;
		&_top{
			margin-bottom: 30rpx;
			&_mid{
				flex:1;
				padding:0 10rpx;
				&_contact{
					font-size: 26rpx;
					color: #999;
				}
			}
		}
		&_desc{
			font-size: 26rpx;
			padding: 10rpx 0;
			border-top: 1px solid #f1f1f1;
			&_label{
				font-weight: bold;
			}
			&_num{
				margin-right: 30rpx;
			}
		}
	}
	&_bottom{
		margin-top: 20rpx;
		&_button{
			margin-left: 10rpx;
			&:first-child{
				margin-left: 0;
			}
		}
	}
}
</style>
